<template>
  <div class="audit-notification-page">
    <!-- 头部导航栏 -->
    <van-nav-bar
      title="自助开单"
      left-arrow
      @click-left="goBack"
      class="custom-nav-bar"
    >
      <template #right>
        <van-icon name="ellipsis" class="nav-icon" />
        <van-icon name="question-o" class="nav-icon" />
      </template>
    </van-nav-bar>

    <!-- 主要内容 -->
    <div class="content">
      <van-cell-group inset class="notice-group">
        <van-cell>
          <template #title>
            <div class="notification-title">自助开单须知</div>
          </template>
        </van-cell>
      </van-cell-group>

      <div class="notification-content">
        <van-cell-group inset class="notice-list">
          <van-cell class="notice-item">
            <template #title>
              <div class="notice-content">
                <span class="notice-number">1、</span>
                <span class="notice-text">
                  便民门诊就诊须知先挂号，再就诊。实名就诊，病员信息与就诊卡不符，不能开药方单。
                </span>
              </div>
            </template>
          </van-cell>

          <van-cell class="notice-item">
            <template #title>
              <div class="notice-content">
                <span class="notice-number">2、</span>
                <span class="notice-text">
                  便民门诊主要开具慢性病临床常用药，如常规中成药、常规西药。根据药品管理规定，
                  <span class="highlight-red">便民门诊不得开具以下药品：（1）血液制品如人血白蛋白、抗蛇毒血清、破伤风抗毒素针、破伤风免疫球蛋白、人γ肝免疫球蛋白等；（2）特殊管理药品，如麻醉药品、精神药品、高警示药品；（3）各类静脉输液用药。</span>
                  如需开上述药品，请到相应专科就诊由专科医生评估后开具。
                </span>
              </div>
            </template>
          </van-cell>

          <van-cell class="notice-item">
            <template #title>
              <div class="notice-content">
                <span class="notice-number">3、</span>
                <span class="notice-text">
                  根据《处方管理办法》，处方开具当日有效；处方一般不得超过7日用量；对于某些慢性病、老年病或特殊情况，处方用量可适当延长，但医师应当注明理由。便民门诊不做病情、检验、检查结果的解释，不开具诊断证明书。
                </span>
              </div>
            </template>
          </van-cell>

          <van-cell class="notice-item">
            <template #title>
              <div class="notice-content">
                <span class="notice-number">4、</span>
                <span class="notice-text">
                  代开药需持开药患者本人和代开药人身份证件，并出示患者过往专科开药病历。
                </span>
              </div>
            </template>
          </van-cell>

          <van-cell class="notice-item">
            <template #title>
              <div class="notice-content">
                <span class="notice-number">5、</span>
                <span class="notice-text">
                  便民门诊仅开具以体检为目的的常规临床医疗化验检查项目，如血、尿、便、便民门诊不开具心电图、B超、X片、CT等，其他特殊大型检查请到专科科室。
                </span>
              </div>
            </template>
          </van-cell>

          <van-cell class="notice-item">
            <template #title>
              <div class="notice-content">
                <span class="notice-number">6、</span>
                <span class="notice-text">
                  工作时间：周一到周五：07：45-12：00，12：45-16：30。周六/周日：08:00-12:00节假日以医院公告为准。
                </span>
              </div>
            </template>
          </van-cell>
        </van-cell-group>

        <!-- 警告提示 -->
        <van-notice-bar
          left-icon="warning-o"
          background="#fff5f5"
          color="#ff4444"
          class="warning-notice"
        >
          <template #default>
            <span class="highlight-red">
              注意:孕妇请在执业医师指导下使用，初诊患者和非慢性疾病的复诊患者不建议在便民门诊就诊开药，请到相应专科就诊。
            </span>
          </template>
        </van-notice-bar>
      </div>
    </div>

    <!-- 底部按钮 -->
    <div class="footer">
      <van-button
        type="primary"
        size="large"
        round
        block
        @click="handleConfirm"
        class="confirm-btn"
      >
        我已阅读并同意须知
      </van-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'

const router = useRouter()

const goBack = () => {
  router.back()
}

const handleConfirm = () => {
  showToast({
    message: '已确认阅读须知',
    type: 'success'
  })
  // 这里可以跳转到实际的开单页面
  // router.push('/prescription')
}
</script>

<style scoped>
.audit-notification-page {
  min-height: 100vh;
  background: #f7f8fa;
  display: flex;
  flex-direction: column;
}

/* 导航栏样式 */
.custom-nav-bar {
  background: white;
  border-bottom: 1px solid #ebedf0;
}

.nav-icon {
  margin-left: 12px;
  color: #969799;
  font-size: 18px;
}

/* 内容区域 */
.content {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

.notice-group {
  margin-bottom: 16px;
}

.notification-title {
  font-size: 18px;
  font-weight: 600;
  color: #323233;
  padding: 8px 0;
}

.notification-content {
  margin-bottom: 80px; /* 为底部按钮留出空间 */
}

.notice-list {
  margin-bottom: 16px;
}

.notice-item {
  padding: 16px !important;
  border-bottom: 1px solid #ebedf0;
}

.notice-item:last-child {
  border-bottom: none;
}

.notice-content {
  display: flex;
  align-items: flex-start;
  line-height: 1.6;
}

.notice-number {
  color: #323233;
  font-weight: 500;
  margin-right: 4px;
  flex-shrink: 0;
}

.notice-text {
  color: #323233;
  font-size: 14px;
  flex: 1;
}

.highlight-red {
  color: #ee0a24;
  font-weight: 500;
}

.warning-notice {
  margin: 16px 0;
  border-radius: 8px;
  border: 1px solid #ffd6d6;
}

/* 底部按钮 */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background: white;
  border-top: 1px solid #ebedf0;
  z-index: 100;
}

.confirm-btn {
  height: 48px;
  font-size: 16px;
  font-weight: 500;
  background: #1989fa;
  border: none;
}

/* Vant组件样式覆盖 */
:deep(.van-cell) {
  padding: 0;
  background: transparent;
}

:deep(.van-cell__title) {
  flex: 1;
}

:deep(.van-cell-group--inset) {
  margin: 0;
  border-radius: 8px;
}

:deep(.van-notice-bar__content) {
  line-height: 1.5;
}

/* 响应式调整 */
@media (max-width: 375px) {
  .content {
    padding: 12px;
  }
  
  .notice-text {
    font-size: 13px;
  }
  
  .footer {
    padding: 12px;
  }
}
</style>
